<!-- 直播详情 -->
<template>
	<view class="study-container">
		<view class="user-card-container">
			<!-- 主卡片 -->
			<view class="user-card">
				<!-- 用户信息 -->
				<!-- 课程名称 -->
				<view class="course-list">
					<view class="course-item" v-for="(course, index) in courseList" :key="index">
						<view class="course-left">
							<u-image :src="course.zbinfo.bczb_logo_uri[0].url" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
						</view>
						<view class="course-right">
							<text class="course-name">{{ course.bczb_name }}</text>
							<text class="course-level">专业等级：{{ course.bczb_zylevel }}</text>
							<text class="course-teacher">开始时间：{{ course.bczb_starttime }}</text>
							<text class="course-teacher">购买截止：{{ course.bczb_buylasttime }}</text>
							<view class="course-footer">
								<text class="course-price">¥{{ course.bczb_price }} 元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二部分 -->
		<view class="floating-stats">
			<!-- 内容 -->
			<view class="teacher-section">
				<!-- <view class="section-title">讲师介绍</view> -->
				<scroll-view class="teacher-scroll" scroll-x="true" show-scrollbar="false">
					<view class="teacher-list">
						<view class="teacher-card" v-for="(teacher, index) in teachers" :key="index">
							<!-- 图片左 -->
							<view class="course-left">
								<u-image :src="teacher.bt_header_uri[0].url" width="120rpx" height="160rpx" mode="aspectFill" radius="4"></u-image>
							</view>
							<!-- 讲师基本信息 -->
							<view class="teacher-detail">
								<text class="teacher-name">{{ teacher.bt_name }}</text>
								<text class="teacher-info">{{ teacher.bt_zhicheng }} | 从业{{ changetWorkdate(teacher.bt_workdate) }}</text>

								<!-- 专业领域 -->
								<view class="skill-tags">
									<text class="skill-tag">
										{{ teacher.bt_zyly }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 图片 -->
				<!-- 介绍和课程表 -->
				<!-- <view  class="tab-content"> -->
				<!-- 课程介绍 -->
				<view class="teacher-explain" v-for="(course, index) in courseList">
					<!-- <view class="section-title">介绍</view> -->
					<view class="teacher-content">
						<text class="teacher-text">{{ course.bczb_desc }}</text>
					</view>
					<view class="teacher-img">
						<u-image :src="course.zbinfo.bczb_banner[0].url" width="100%" height="300rpx"
							mode="widthFix" radius="8" class="teacher-image"></u-image>
					</view>
				</view>
				<!-- </view>		 -->
			</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<u-button type="default" shape="circle" @click="callMake" :customStyle="customStyle" class="buy-btn">
				客服助理
			</u-button>
			<u-button type="default" shape="circle" @click="fxUrlLine" :customStyle="customStyle" class="buy-btn">
				分享赚积分
			</u-button>
			<u-button v-if="courseList[0].isbuy == 0" type="default" shape="circle" :customStyle="customStylePay" @click="buyCourse" class="buy-btn">
				购买 ¥{{ courseInfo.countPrice }}
			</u-button>
			<u-button v-else type="default" shape="circle" :customStyle="customStylePay" @click="buyCourse" class="buy-btn">
				去直播间
			</u-button>
		</view>

		<!-- 底部弹出的面试邀请表单 -->
		<view>
			<u-popup v-model="showInvitePopup" mode="bottom" border-radius="20" closeable>
				<view class="invitation-popup">
					<view class="popup-header">
						<text class="title">支付</text>
					</view>
					<!-- 需要支付的详情 -->
					<view class="pay-container">
						<!-- 金额汇总 -->
						<view class="card">
						  <view class="amount-item">
						    <text>订单金额</text>
						    <text>¥{{ courseList[0].bczb_price}}</text>
						  </view>
						  <view class="amount-item">
						    <text>优惠折扣</text>
						    <text>-¥0.00</text>
						  </view>
						  <view class="total-amount">
						    <text>需支付：</text>
						    <text class="price">￥{{courseInfo.countPrice}}</text>
						  </view>
						</view>
						<!-- 支付方式 -->
						<view class="card">
						  <view class="section-title">支付方式</view>
						  
						  <view class="payment-item" @click="selectPayment('wechat')">
						    <u-checkbox 
						      v-model="payment.wechat" 
						      shape="circle"
						      active-color="#03B8CD"
						    ></u-checkbox>
						    <view class="payment-info">
						      <image src="/static/images/wechat-pay.png" class="payment-icon"></image>
						      <text>微信支付</text>
						    </view>
						  </view>
						  
<!-- 						  <view class="payment-item" @click="selectPayment('other')">
						    <u-checkbox 
						      v-model="payment.other" 
						      shape="circle"
						      active-color="#03B8CD"
						    ></u-checkbox>
						    <view class="payment-info">
						      <image src="/static/images/bank-transfer.png" class="payment-icon"></image>
						      <text>其他方式转账（上传转账凭证）</text>
						    </view>
						  </view> -->
						  
						  <!-- 上传凭证区域 -->
<!-- 						  <view class="upload-area" v-if="payment.other">
								<u-upload
								  action = "#"
									ref = "upload"
								  :fileList="photoList"
								  @on-list-change="onchange"
								  @on-remove="(e) => deletePic(e, index)"
								  name="certPhoto"
								  multiple
								  :maxCount="1"
								  width="160"
								  height="160"
									:auto-upload="false"
								>
								  <image
								    v-if="photoList.length === 0"
								    src=""
								    class="upload-placeholder"
								  ></image>
								</u-upload>
						  </view> -->
						</view>
						<!-- 底部支付按钮 -->
						<view class="footer">
						  <u-button 
						    type="primary" 
						    shape="circle" 
						    @click="confirmPayment"
								:customStyle="customStylePay"
						    :disabled="!payment.wechat && !payment.other"
						  >
						    确认支付
						  </u-button>
						</view>						
					</view>
				</view>
			</u-popup>
		</view>
	</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				customStylePay: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				customStyle: {
					// backgroundColor: "#D5D5D5",
					color: "#03B8CD"
				},
				courseList: [{
					id: 1,
					cover: '/static/course1.jpg',
					name: '前端开发高级课程',
					level: '一级',
					rating: 3.4,
					teacher: '张老师',
					lessonCount: 45,
					price: '80.00',
					category: '前端开发'
				}],
				currentTab: 0,
				teachers: [{
						cover: '/static/course1.jpg',
						name: '张老师',
						title: '高级前端工程师',
						experience: 8,
						rating: 3.4,
						skills: ['前端架构', '性能优化', 'Vue.js', 'React.js']
					},
					{
						cover: '/static/course1.jpg',
						name: '李老师',
						title: '全栈工程师',
						experience: 5,
						rating: 3.4,
						skills: ['Node.js', 'TypeScript', '前端工程化']
					},
					{
						cover: '/static/course1.jpg',
						name: '王老师',
						title: 'UI设计师',
						experience: 6,
						rating: 4.2,
						skills: ['UI设计', '交互设计', '用户体验']
					}
				],
				courseInfo: {
					orderMoney: '',  //订单金额
					jifeng: '', //积分
					countPrice: '' ////总金额
				},

				// 讲师介绍
				// 是否弹窗
				showInvitePopup: false,
				payment: {
				  wechat: true,
				  other: false
				},
				photoList: [], ///图片
				photoListId:'', ///图片ID
				base64Data: '', ///base64
				zbCode: '', //直播code
				starStudyCode: '' ///开始学习直播code
			}
		},
		onLoad(options) {
			this.zbCode = options.zbcode
			// console.log('zbcode:', this.zbCode)
		},
		onShow() {
			// 获取直播课程详情-old
			// this.getZbDetails()
			// 从业者开始学习直播
			this.createCongyeLive()
		},
		methods: {
			// 从业者开始学习直播
			createCongyeLive() {
				this.$u.api.createzbstudy({
					"usercode": uni.getStorageSync('usercode'),  ///#从业者用户code
					"bczbcode": this.zbCode   ///#直播课程的code
				}).then(res => {					
					this.starStudyCode = res.data.base_info
					// console.log('star:',this.starStudyCode)
					this.selectLiveOnline()
				})
			},
			// 获取直播课程详情
			// getZbDetails() {
			// 	this.$u.api.querycbzb({
			// 		"bczbcode": this.zbCode, ////#直播课的code
			// 	}).then(res => {
			// 		console.log('详情：', res )					
										
			// 	})
			// },
			
			// 新的从业者直播列表
			selectLiveOnline() {
				this.$u.api.queryzblist({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('newlive:', res)
					let baseinfo = res.data.base_info
					this.courseList = []
					
					// let filterinfo = baseinfo.find(item => item.bczb_code === this.zbCode)
					// this.courseList.push(baseinfo.filter(item => item.bczb_code == this.zbCode))
					this.courseList = baseinfo.filter(item => item.bczb_code == this.zbCode)
					console.log('newlive-3:', this.courseList)
					this.teachers = []
					this.teachers = this.courseList[0].zbinfo.bctinfo
					
					this.courseInfo.orderMoney = this.courseList[0].bczb_price
					this.courseInfo.countPrice = this.courseList[0].bczb_price 
					console.log('newlive-2:', this.courseInfo)
				})
			},
			
			// 工作年限
			changetWorkdate(workTime) {
				let workYears = util.calculateDateDifference(workTime)
				let reWrokYears = ''
				if (workYears.years == 0){
					reWrokYears = workYears.months+'个月';
				} else 	if(workYears.months == 0){
					reWrokYears = workYears.years+'年';
				} else {
					reWrokYears = workYears.years+'年'+workYears.months+'个月';
				}	
				return reWrokYears
				// console.log('工作年限：', reWrokYears)
			},
			
			
			// 根据获取回来的开始学习直播的code，			
			changeTab(index) {
				this.currentTab = index;
			},
			buyCourse() {
				// 调用课程购买的支付页面
				// uni.navigateTo({
				// 	url: `/pages/onlinecourse/coursepay`
				// });
				this.showInvitePopup = true;
			},
			selectPayment(type) {
			  // 单选逻辑
			  if (type === 'wechat') {
			    this.payment.wechat = true
			    this.payment.other = false
			  } else {
			    this.payment.wechat = false
			    this.payment.other = true
			  }
			},
			// 图片上传相关方法
			afterRead(event) {
			  // 这里处理图片上传逻辑
			  const { file } = event
			  this.fileList.push({
			    url: file.url,
			    status: 'uploading',
			    message: '上传中'
			  })
			  
			  // 模拟上传成功
			  setTimeout(() => {
			    this.fileList[this.fileList.length - 1].status = 'success'
			    this.fileList[this.fileList.length - 1].message = ''
			  }, 1000)
			},
			// 联系客服
			callMake() {
				uni.navigateTo({
					url: `/pages/Institution/mine/makePhoneCall`
				});
			},
			// 邀请分享
			fxUrlLine() {
				this.$u.api.createyqmlink({
					"usercode": uni.getStorageSync('usercode'), //#用户code
					"params":{"linkcode":this.zbCode, "ywcode":"zbbm"}, ///要传入的参数，ywcode:  团队邀请考证报名：kzbm  ,  比赛邀请： bsbm   直播：zbbm   课程：kcbm
				}).then(res => {
					console.log('生成邀请链接：', res)
					this.invitationLink = res.data.base_info
					uni.setClipboardData({
					  data: this.invitationLink,
					  success: () => {
					    uni.showToast({
					      title: '链接已复制',
					      icon: 'success'
					    });
					  }
					});
				})
			},
			
			// 图片上传开始
			// 当图片变化时
			onchange(list,name) {
				// console.log('图片变化时-name：',name)
				if(this.photoList.length == 0) {
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						this.photoList = []
						this.photoList = [...this.photoList, ...newFiles];									
			
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64()
						})								
					}
				}
				console.log("onchange-3:", this.photoList)	
			},
			
			// 上传Base64数据到服务器
			uploadBase64() {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传照片"
				}).then(res => {					
					this.photoListId = res.data.base_info
					console.log('uploadres:', this.photoListId)
				})
			},
			
			
			// 删除图片
			deletePic(event,index) {
			  this.form.photoList.splice(event, 1)
				console.log('删除:',this.form)
			},
			// 图片上传结束
			
			
			
			deletePic(event) {
			  this.fileList.splice(event.index, 1)
			},
			// 直播支付
			confirmPayment() {				
				this.$u.api.createbczborder({
					"bczbcode": this.zbCode , //#直播编号
					"usercode": uni.getStorageSync('usercode'), //#用户编号
					"payprice": this.courseInfo.countPrice, //#支付价格
					"yhprice":"0", //#优惠价格,若无，直接传0
					"paytype":"0", //#支付类型，0微信，1线下
				}).then(res => {
					console.log('pay:',res)
					uni.showToast({
						title: '支付成功！',
						icon: 'none'
					})
					this.showInvitePopup = false;
					
				})
				
				
			  // if (this.payment.other && this.fileList.length === 0) {
			  //   uni.showToast({
			  //     title: '请上传转账凭证',
			  //     icon: 'none'
			  //   })
			  //   return
			  // }
			  
			  // uni.showLoading({
			  //   title: '支付处理中...'
			  // })
			  
			  // // 模拟支付请求
			  // setTimeout(() => {
			  //   uni.hideLoading()
			  //   if (this.payment.wechat) {
			  //     // 微信支付逻辑
			  //     uni.showToast({
			  //       title: '微信支付成功,开始学习吧!',
			  //       icon: 'success'
			  //     })
			  //   } else {
			  //     // 转账支付逻辑
			  //     uni.showToast({
			  //       title: '转账凭证已提交，请等待审核',
			  //       icon: 'success'
			  //     })
			  //   }
			    
			  //   // 支付成功后跳转
			  //   setTimeout(() => {
			  //     uni.redirectTo({
			  //       url: '/pages/order/result'
			  //     })
			  //   }, 1500)
			  // }, 2000)
			},
			// 课程播放
			coursePlay() {
				uni.redirectTo({
				  url: '/pages/Practitioner/onlinecourse/videoplay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		// width: 100%;
		// height: 100%;
		background-color: #6c6c6c;
	}

	/* 外层容器 */
	.user-card-container {
		position: relative;
		padding-bottom: 60rpx;
		/* 为浮动统计留出空间 */
		background-color: #6c6c6c;
		height: 235px;
		top: 10px;

	}

	/* 主卡片样式 */
	.user-card {
		// background: #6c6c6c;
		// border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		color: #ffffff;

	}

	// 课程名称
	.course-list {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;


		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 24rpx;
			color: #ffffff;
			margin-left: 10rpx;
		}
	}

	.course-footer {
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;

		.course-count {
			font-size: 24rpx;
			color: #ffffff;
			margin-right: 10px;
		}

		.course-price {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	/* 浮动统计行样式,内容 */
	.floating-stats {
		position: absolute;
		top: 180px;
		left: 0rpx;
		right: 0rpx;
		// height: 80%;
		background: #f0f0f0;
		border-radius: 40rpx 40rpx 0 0;

		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		// padding: 0 20rpx;
		// box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		// z-index: 2;			
		.course-tabs {
			position: static;
			margin: 10px;
			left: 0rpx;
			right: 0rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #f0f0f0;
		}

		// 讲师内容
		.teacher-section {
			padding: 10rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin: 5px;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
		}

		.teacher-scroll {
			width: 100%;
			white-space: nowrap;
			// margin-top: 20px;

			/* 隐藏滚动条 */
			::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
				color: transparent;
			}
		}

		.teacher-list {
			display: inline-flex;
			gap: 20rpx;
		}

		.teacher-card {
			display: inline-flex;
			flex-direction: row;
			// 每一个卡片的宽度
			width: 280px;
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			white-space: normal;

			.teacher-rating {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.rating-value {
					font-size: 24rpx;
					color: #ff9900;
					margin-left: 8rpx;
				}
			}

			.teacher-detail {
				// display: none;
				display: inline-flex;
				flex-direction: column;

				.teacher-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 6rpx;
				}

				.teacher-info {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 15rpx;
				}

				.skill-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 8rpx;

					.skill-tag {
						font-size: 20rpx;
						color: #2979ff;
						background-color: #e6f0ff;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						display: inline-block;
					}
				}
			}
		}


	}

	// 图片内容
	// .tab-content {
	// 	padding: 20rpx;
	// 	border-radius: 30rpx;
	// 	position: static;
	// 	// background-color: #2979ff;
	// }

	.teacher-explain {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;

		.teacher-content {
			font-size: 32rpx;
			margin-bottom: 10px;
		}


		// .teacher-text {
		// 	font-size: 32rpx;
		// 	margin-bottom: 20rpx;
		// 	padding-bottom: 16rpx;
		// 	border-bottom: 1rpx solid #eee;
		// }

		// .teacher-image {
		// 	margin-top: 50px;
		// }
	}

	// 讲师介绍
	.chapter-container {
		padding: 20rpx;
		height: 800px;
		background-color: #ffffff;
	}

	.chapter-schedule {
		background-color: #ffffff;
		// margin: 5px;
		margin-bottom: 10px;
		height: 50px;
		line-height: 50px;
		border-bottom: 5px solid #f0f0f0;

		.progress {
			width: 75%;
			margin: 0 10px;
		}
	}


	.chapter-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.chapter-item {
		padding: 24rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		&.completed {
			background-color: #fff;
			opacity: 0.8;
		}

		&.locked {
			opacity: 0.6;

			.lesson-name,
			.lesson-duration {
				color: #c0c4cc !important;
			}
		}
	}

	.chapter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.chapter-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.lesson-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;

		.lesson-info {
			display: flex;
			align-items: center;
			gap: 15rpx;

			.lesson-name {
				font-size: 28rpx;
				color: #333;
			}

			.lesson-status {
				font-size: 24rpx;
				color: #19be6b;
			}
		}

		.lesson-duration {
			font-size: 24rpx;
			color: #909399;
		}
	}

	// 底部
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;

		// .action-left {
		// 	display: flex;
		// 	align-items: center;
		// 	flex: 1;

		// 	.action-item {
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		margin-right: 30rpx;

		// 		.action-text {
		// 			font-size: 22rpx;
		// 			color: #606266;
		// 			margin-top: 6rpx;
		// 		}
		// 	}

		// 	.earn-points {
		// 		.action-text {
		// 			color: #ff9900;
		// 		}
		// 	}
		// }

		.buy-btn {
			width: 200rpx;
			height: 80rpx;
		}
	}
	
	// 弹窗
	.invitation-popup {
	  height: 70vh;
	  display: flex;
	  flex-direction: column;
		
		.popup-header {
		  padding: 30rpx;
		  text-align: center;
		  border-bottom: 1rpx solid #f5f5f5;
		}
			
		.container {
		  padding: 20rpx;
		  padding-bottom: 120rpx;
		  background-color: #f7f7f7;
		  min-height: 100vh;
		}
		
		.card {
		  background-color: #fff;
		  border-radius: 12rpx;
		  padding: 24rpx;
		  margin-bottom: 20rpx;
		  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		
		.goods-item {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 20rpx 0;
		  border-bottom: 1rpx solid #f5f5f5;
		  
		  &:last-child {
		    border-bottom: none;
		  }
		}
		
		.goods-info {
		  flex: 1;
		  display: flex;
		  align-items: center;
		  overflow: hidden;
		}
		
		.goods-name {
		  font-size: 28rpx;
		  color: #333;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		  max-width: 40%;
		}
		
		.goods-level {
		  font-size: 24rpx;
		  color: #999;
		  margin: 0 10rpx;
		}
		
		.goods-price {
		  font-size: 26rpx;
		  color: #ff4d4f;
		}
		
		.goods-count {
		  font-size: 26rpx;
		  color: #666;
		}
		
		.amount-item {
		  display: flex;
		  justify-content: space-between;
		  margin-bottom: 16rpx;
		  font-size: 26rpx;
		  color: #666;
		}
		
		.total-amount {
		  display: flex;
		  justify-content: flex-end;
		  margin-top: 20rpx;
		  font-size: 28rpx;
		  font-weight: bold;
		  
		  .price {
		    color: #ff4d4f;
		    margin-left: 10rpx;
		  }
		}
		
		.section-title {
		  font-size: 28rpx;
		  font-weight: bold;
		  margin-bottom: 20rpx;
		}
		
		.payment-item {
		  display: flex;
		  align-items: center;
		  padding: 20rpx 0;
		  border-bottom: 1rpx solid #f5f5f5;
		  
		  &:last-child {
		    border-bottom: none;
		  }
		}
		
		.payment-info {
		  display: flex;
		  align-items: center;
		  margin-left: 20rpx;
		  font-size: 26rpx;
		}
		
		.payment-icon {
		  width: 40rpx;
		  height: 40rpx;
		  margin-right: 15rpx;
		}
		
		.upload-area {
		  margin-top: 20rpx;
		  padding-top: 20rpx;
		  border-top: 1rpx dashed #eee;
		}
		
		.upload-btn {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  width: 200rpx;
		  height: 200rpx;
		  background-color: #f7f7f7;
		  border-radius: 8rpx;
		  color: #999;
		  font-size: 24rpx;
		}
		
		.footer {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  padding: 20rpx;
		  background-color: #fff;
		  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
		  
		  /deep/ .u-btn {
		    height: 80rpx;
		    font-size: 30rpx;
		  }
		}	
	}	
</style>